<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
     xmlns:pr="http://xml.netbeans.org/schema/products">
    <xsl:output method="html"/>
    <xsl:template match="/">
        <html>
            <style type="text/css">
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;
                cursor: pointer;                
            }
            .pg-selected {
                color: black;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;                
            }
             table, td, th
            {
              border:1px solid green;
              
            }
            th
            {
                background-color:green;
                color:white;
            }
            table.center {
             margin-left:auto;
             margin-right:auto;
             }

             div.center1{
             margin-left:auto;
             margin-right:auto;
             }
            </style>

             

            <script type="text/javascript" src="js/paging.js"></script>
            <script type="text/javascript" src="js/productscript.js"></script>
            <body>
                <xsl:apply-templates/>
            </body>
        </html>
    </xsl:template>

    <xsl:template match = "pr:products">
        <table class= "center" border ="2" id="results" >
            <tr>
                   
                <th> Name  </th>
                <th> Price </th>
                <th> Quantity </th>
                <th> Image </th>
            </tr>
            <xsl:for-each select = "pr:product">
                <tr>
                    <td width="30%">
                        <xsl:value-of select="pr:productName"/>
                    </td>
                    <td width ="30%">
                        <xsl:value-of select="pr:price"/>
                    </td>
                    <td width ="30%">
                        <xsl:value-of select="pr:quantity"/>
                    </td>
                    <td width ="40%">
                        <img src= "{pr:imageThumbnail}" />
                    </td>
                </tr>
            </xsl:for-each>
        </table>

        <div class="center1" id="pageNavPosition"></div>
        <script type="text/javascript">
            var pager = new Pager('results',4);
            pager.init();
            pager.showPageNav('pager', 'pageNavPosition');
            pager.showPage(1);
        </script>

    </xsl:template>

</xsl:stylesheet>
